<template>
	<!-- //发票详情 -->
	<view class="conetnt display displayColumn width_750 ">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">发票详情</text>
			</template>
		</u-navbar>
		
		<!--  -->
		<view class="fn_content display  width_750 displayColumn all_item">
			<!-- 第一行 电子普通发票 -->
			<view class="comonfapiao display  displaycenter_aliem fontSize font_comm M-T30" style="padding-top: 24rpx;padding-bottom: 24rpx;" @click="toshows">
				<span class="fn_ttx3 M-L30">电子普通发票</span>
				<view class="fn_item display  displaycenter_aliem fontSize font_comm M-R30 " v-if="info.invoiceProgress=='开票成功'">
					<span class="fn_ttx3" style="color: #FF672D;">查看</span>
					<uni-icons type="right" color="#72778A" size="15"></uni-icons>
				</view>
				<view class="fn_item display  displaycenter_aliem fontSize font_comm M-R30 " v-if="info.invoiceProgress!='开票成功'">
					<span class="fn_ttx3" style="color: #FF672D;">开具失败</span>
				</view>
			</view>
			
			<!-- 发票信息 -->
			<view class="fn_two display  width_750 displayColumn all_item fontSize font_comm displaycenter_aliem M-T36">
				<view class="display displaycenter_aliem width_750">
					<span class="fn_txt3 M-L30">发票信息</span>
				</view>
				<view class="fn_two_all display  displayColumn M-T20">
					<view class="fn_two_one display  displaycenter_aliem width-100 M-T30">
						<span class="fn_ttx3 M-L30">抬头名称</span>
						<span class="fn_ttx4 M-R30">{{info.headerName}}</span>
					</view>
					<view class="fn_line M-L30 display M-T30"></view>
					<view class="fn_two_one display  displaycenter_aliem width-100 M-T30" >
						<span class="fn_ttx3 M-L30">公司税号</span>
						<span class="fn_ttx4 M-R30">{{info.headerNumber}}</span>
					</view>
				<!-- 	<view class="fn_two_one display  displaycenter_aliem width-100 M-T30" v-else>
						<span class="fn_ttx3 M-L30"></span>
						<span class="fn_ttx4 M-R30">9144 0204 5625 9843 25</span>
					</view> -->
					<view class="fn_line M-L30 display M-T30"></view>
					<view class="fn_two_one display  displaycenter_aliem width-100 M-T30">
						<span class="fn_ttx3 M-L30">发票金额</span>
						<span class="fn_ttx41 M-R30">￥<span style="font-size: 40rpx;">{{info.invoiceAmount}}</span></span>
					</view>
					<view class="fn_line M-L30 display M-T30"></view>
					<view class="fn_two_one display  displaycenter_aliem width-100 M-T30">
						<span class="fn_ttx3 M-L30">申请时间</span>
						<span class="fn_ttx4 M-R30">{{info.createTime}}</span>
					</view>
					<!-- <view class="fn_line M-L30 display M-T30"></view> -->
					<!-- <view class="fn_two_one display  displaycenter_aliem width-100 M-T30">
						<span class="fn_ttx3 M-L30">电话号码</span>
						<span class="fn_ttx4 M-R30">020-34786521</span>
					</view> -->
				</view>
			</view>
			<!-- 查看订单 -->
			<view class="comonfapiao display  displaycenter_aliem fontSize font_comm M-T30" style="padding-top: 24rpx;padding-bottom: 24rpx;" @click="torelateorder">
				<span class="fn_txt12 M-L30">1张发票，含{{info.payOrderIds.split(',').length}}个订单</span>
				<view class="fn_item display  displaycenter_aliem fontSize font_comm M-R30">
					<span class="fn_txt2" style="color: #72778A;">查看相关订单</span>
					<uni-icons type="right" color="#72778A" size="15"></uni-icons>
				</view>
			</view>
			<!-- 失败原因 -->
			<view class="error display  width_750 displayColumn all_item fontSize font_comm M-T36"  v-if="info.invoiceProgress!='开票成功'">
				<view class="display displaycenter_aliem width_750 " >
					<span class="fn_txt3 M-L30">失败原因</span>
				</view>
				<view class="comonfapiao display  displaycenter_aliem fontSize font_comm" style="padding-top: 24rpx;padding-bottom: 24rpx;margin-top: 20rpx;">
					<span class="fn_txt12 M-L30">失败原因</span>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true,//开票成功 false 、开票失败
				id:'',
				info:{}
			}
		},
		onLoad(options) {
			this.id = options.id;
			console.log(this.id)
			// 获取想详情列表
			this.getDetails()
		},
		methods: {
			getDetails(){
				this.$modal.loading('加载中');
				this.$req.get(`/xcx/userInvoice/${this.id}`).then(res=>{
					this.$modal.closeLoading();
					this.info = res.data.data;
				console.log(res)
			})
				
			},
			torelateorder(){
				this.$tab.navigateTo('/packageC/relatedorders/relatedorders?payOrderIds='+this.info.payOrderIds)
			},
			// 发票详情
			toshows(){
				if(this.flag){
					this.$tab.navigateTo('/packageC/fapiaodetails/fapiaodetails?pdfUrl='+this.info.pdfUrl)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.comonfapiao{
		// padding: 24rpx 30rpx;
		justify-content: space-between;
		width: 690rpx;
		// height: 88rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_two_all{
		width: 690rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_line{
		width: 630rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}
	.fn_ttx3{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_ttx4{
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}
	.fn_ttx41{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_txt3{
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}
	.fn_two_one{
		justify-content: space-between;
	}
	.fn_txt12{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_txt2{
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
	}
</style>
